<template>
	<div>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="javasript:;">
						<img alt="logo" src="../../assets/logo.png" >
					</a>
				</div>
				<router-link tag="nav" :to="{name:'account'}" class="navbar-account navbar-right">
					<div class="navbar-account__wrap clearfix">
						<div class="navbar-account__left">
							<span class="navbar-account__object">
								<img src="../../assets/logo.png" class="img-responsive img-circle" alt=""account />
							</span>
						</div>
						<div class="navbar-account__right">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</div>
						<p class="navbar-account__body">杭州快美广告有限公司</p>
					</div>
				</router-link>
			</div>
		</nav>
		<section class="apt-list">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-3">
						<div class="apt-box apt-box--created" data-toggle="modal" data-target="#new-application">
							<div class="apt-box__pos-created">
								<span class="apt-box__sign glyphicon glyphicon-plus"></span>
								<p class="apt-box__text">创建新应用</p>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="apt-box" @click.stop="routeDetail('1')">
							<p class="apt-box__name">
								我的应用
							</p>
							<p class="apt-box__id">（App_Id:1234567123123）</p>
							<div class="apt-box__info">
								<p class="apt-box__info-num">1000</p>
								<p class="apt-box__info-title">总交易额（万）</p>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<div class="apt-box__info apt-box__info--lg">
										<p class="apt-box__info-num">1000</p>
										<p class="apt-box__info-title">今日交易额（万）</p>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="apt-box__info apt-box__info--lg">
										<p class="apt-box__info-num">1000</p>
										<p class="apt-box__info-title">成功交易笔数</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						
					</div>
					<div class="col-md-3">

					</div>
					<div class="col-md-3">

					</div>
					<div class="col-md-3">

					</div>
				</div>
			</div>
		</section>
		<section class="modal fade" id="new-application" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	  						<span aria-hidden="true">×</span>
	  					</button>
	  					<h4>创建应用</h4>
					</div>
					<div class="modal-body">
						<div class="form">
  							<div class="form-group" :class="{'form-group--error':$v.application.name.$error}">
  								<input type="text" v-model.trim="application.name" @input="$v.application.name.$touch()" class="form-control" placeholder="应用名称">
  								<div>
									<label v-if="!$v.application.name.required" class="form-group__message zoomIn animated animated_500ms">应用名称不能为空</label>
								</div>
  							</div>
  							<div class="form-group">
  								<button type="button" class="btn btn-primary form-control" @click.stop="newApplication()">创建</button>
  							</div>
  						</div>
					</div>
				</div>
				
			</div>
		</section>
	</div>
</template>
<script>

	import { required } from 'vuelidate/lib/validators'

	export default {
		name:'application-list',
		data(){
			return {
				application:{
					name:''
				}
			}
		},
		validations:{
			application:{
				name:{required}
			}
		},
		methods:{
			routeDetail(id){
				this.$router.push(`/application/${id}/detail`);
			},
			newApplication(){
				let that = this;
				let application = that.application;
				let $v = $.extend( true,{},this.$v );

				that.$v.application.$touch();

				if( !$v.$invalid ){
					this.$store.dispatch( 'ChangeToastState',{
						sign:true,
						text:'可以提交'
					} )
					
				}
			}
		},
		mounted(){
			let that = this;
			$('#new-application').on( 'hidden.bs.modal',()=>{
				that.$v.application.$reset();
			} )
		}
	}
</script>
<style lang="less">
	@import '../../assets/style/color';
	@import '../../assets/style/font';
	.navbar-search{
  		>.box-search{
  			margin:15px auto;
  		}
  	}
	.navbar-account{
		width:280px;
		height: 60px;
		box-sizing: border-box;
		padding:10px 20px;
		background: #fff;
		margin:15px 0 !important;
		cursor: pointer;
		.navbar-account__left{
			float:left;
			>.navbar-account__object{
				display: block;
				width: 40px;
				height: 40px;
			}
		}
		.navbar-account__body{
			margin-top:12px;
			font-size: @font14;
			color:@cl_444;
		}
		.navbar-account__right{
			float:right;
			margin-top:12px;
			color:@cl_444;
		}
	}
	.apt-list{
		margin-top:40px;
	}
	.apt-box{
		position: relative;
		height: 366px;
		font-size:10px;
		box-sizing: border-box;
		background: #fff;
		padding:30px 20px;
		margin-bottom:20px;
		cursor: pointer;
		.apt-box__pos-created{
			position: absolute;
			top:50%;
			left: 50%;
			transform:translate(-50%,-50%);
		}
		&:hover{
			box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
		}
		.apt-box__sign{
			font-size:26px;
		}
		.apt-box__text{
			font-size:16px;
			color:@cl_444;
			line-height: 1.1875;
			margin-top:8px;
		}
		>.apt-box__name{
			font-size:1.6em;
			line-height: 1.187;
			color:@cl_444;
			margin-bottom:1.25em;
		}
		>.apt-box__id{
			color:@cl_999;
			font-size:1.4em;
			line-height: 1.428;
			margin-bottom:2.85em;
		}
		.apt-box__info{
			width: 100%;
			background: @cl_d9d9d9;
			margin-bottom:1.666em;
			>.apt-box__info-num{
				font-size:2em;
				line-height: 1.5;
				color:@cl_444;
				padding:12px 0 7px 0;
			}
			>.apt-box__info-title{
				font-size:1.2em;
				line-height: 1.666;
				color:@cl_999;
				padding-bottom:12px;
			}
			&.apt-box__info--lg{
				margin-bottom:0;
				>.apt-box__info-num{
					line-height: 3em;
					padding:8px 0 2px 0;
				}
				>.apt-box__info-title{
					line-height: 1.167;
					padding-bottom:26px;
				}
			}
		}
	}
	#new-application{
		.modal-content{
			width: 450px;
			margin:0 auto;
		}
		button.form-control{
			width: 100%;
		}
		.form-group{
			.form-group__message{
				right: 20px;
			}
		}
	}
</style>